<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.processing_code" placeholder="加工单号" @keyup.enter.native="searchBtn" size="small"
                              style="width: 150px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.jy_number" placeholder="采退返修单号" @keyup.enter.native="searchBtn" size="small"
                              style="width: 150px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.sku_code" placeholder="SKU" @keyup.enter.native="searchBtn" size="small"
                              style="width: 120px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.factory_name" placeholder="工厂名称" @keyup.enter.native="searchBtn" size="small"
                              style="width: 120px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.group" size="small" style="width: 100px">
                        <el-option v-for="(item, index) in groups" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small"
                               :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small">
                <el-table-column label="成品加工编码" align="center" prop="processing_code" width="150"></el-table-column>
                <el-table-column label="采退返修单号" align="center" prop="jy_number"></el-table-column>
                <el-table-column label="款号" align="center" prop="type_no" width="110"></el-table-column>
                <el-table-column label="SKU" align="center" prop="sku_code" width="140"></el-table-column>
                <el-table-column label="计划数" align="center" prop="num" width="80"></el-table-column>
                <el-table-column label="实际数" align="center" prop="sj_num" width="80">
                    <template slot-scope="{ row }">
                        <div style="color:red">
                            {{row.sj_num}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="业务类型" align="center" prop="groups" width="80">
                    <template slot-scope="{ row }">
                        <el-tag size="mini">{{row.groups==1?"返厂维修":"采购退货"}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="供应商" align="center" prop="factory_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="发起时间" align="center" prop="createtime" width="135"></el-table-column>
                <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作人" align="center" prop="adduser" width="100"></el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>

import {itemReturnList} from "@/api/wms/itemReturn";

export default {
    name: "wms_itemReturn",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {processing_code: "", jy_number: "", sku_code: "", group: 0, factory_name: ""},
            groups:[{value:0, label:"采购退货"},{value:1, label:"返厂维修"}],
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit,
                groups: this.form.group
            };
            if(this.form.factory_name){
                param.factory_name = this.form.factory_name;
            }
            if(this.form.sku_code){
                param.sku_code = this.form.sku_code;
            }
            if(this.form.jy_number){
                param.jy_number = this.form.jy_number;
            }
            if(this.form.processing_code){
                param.processing_code = this.form.processing_code;
            }
            this.loading = true;
            itemReturnList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
